<template>
	<view class="annu-review">
		<!--首页 年审 -->
		<u-navbar leftIconSize="34rpx" autoBack :placeholder="true" bgColor="#ffffff">
			<view slot="center">
				<text class="c-000 pf-sc fw-600" style="font-size: 34rpx;">年审</text>
			</view>
		</u-navbar>
		<view
			class="authentication-container w-750 b-box  bg-fa po-re"
			:style="{ height: containerHeight }"
		>
			<scroll-view scroll-y="true" :style="{ height: containerHeight }">
				<view class="w-100 b-box" style="padding-bottom: 30rpx;">
					<view style="height: 778rpx;z-index: 10;" class="w-750 b-box">
						<image :src="require('../static/bx.png')" style="width: 750rpx;height: 778rpx;"></image>
					</view>
					<view style="" class="w-100 b-box">
						<view style="padding: 0 36rpx;" class="b-box w-100 bg-ff">
							<view
								class="d-flex flex-r ali-i-c just-c b-box w-100 bg-ff"
								style="border-bottom: 2rpx solid #EEEEEE;height: 112rpx;"
							>
								<text
									class="pf-sc fw-400"
									style="font-size: 30rpx;color: rgba(0,0,0,0.9000);margin-right: 100rpx;"
								>
									姓名
								</text>
								<u-input
									border="none"
									placeholder="请填写姓名"
									v-model="uname"
									placeholderStyle="color:#555;fontWeight:400;fontsize:30px;fontfamily:PingFang SC-Regular, PingFang SC"
									:customStyle="{ color: 'rgba(0,0,0,0.9000)', font: '400 30rpx PingFang SC' }"
								></u-input>
							</view>
							<view
								class="d-flex flex-r ali-i-c just-ev b-box w-100 bg-ff"
								style="border-bottom: 2rpx solid #EEEEEE;height: 112rpx;"
							>
								<text
									class="pf-sc fw-400"
									style="font-size: 30rpx;color: rgba(0,0,0,0.9000);margin-right: 40rpx;"
								>
									联系手机
								</text>
								<u-input
									border="none"
									placeholder="请输入您的联系手机"
									v-model="uphone"
									placeholderStyle="color:#555;fontWeight:400;fontsize:30px;fontfamily:PingFang SC-Regular, PingFang SC"
									:customStyle="{ color: 'rgba(0,0,0,0.9000)', font: '400 30rpx PingFang SC' }"
								></u-input>
							</view>
						</view>
					</view>
					<!-- 选择 -->
					<view
						class="d-flex flex-r ali-i-c b-box w-100 bg-ff"
						style="height: 112rpx;padding: 0 36rpx;"
					>
						<view
							class="d-flex flex-r ali-i-c just-s"
							v-for="(item, index) in reviewList"
							:key="index"
							style="margin-right: 86rpx;"
							@click="SelectCurrent(index)"
						>
							<view
								:class="{ actived: selected === index + 1 }"
								style="width: 40rpx;height: 40rpx;border-radius: 40rpx;border: 2rpx solid #999999;margin-right: 12rpx;"
							></view>
							<text class="fw-400 pf-sc c-333" style="font-size: 30rpx;">{{ item }}</text>
						</view>
					</view>
					<view
						style="width: 686rpx;height: 2rpx;margin: 0 auto;background-color: #999;margin-bottom: 34rpx;"
					></view>
					<!-- 行驶证-->
					<view style="display: flex;" v-if="selected == 1">
						<view style="margin-left: 36rpx;">行驶证</view>
						<view style="margin-left: 74rpx;" @click="addImg">
							<image
								v-if="!img"
								:src="require('../static/add.png')"
								mode="widthFix"
								style="width: 200rpx;height: 111rpx;"
							></image>
							<image
								v-if="img"
								:src="'https://www.chejingjing.cn' + img"
								mode="widthFix"
								style="width: 200rpx;height: 111rpx;"
							></image>
						</view>
					</view>

					<!-- btn -->
					<view class="w-100 b-box d-flex flex-c ali-i-c just-sw" style="margin-top: 96rpx;">
						<u-button
							:throttleTime="700"
							@click="Submit"
							:customStyle="{
								height: '88rpx',
								width: '670rpx',
								font: '500 32rpx PingFang SC',
								color: '#ffffff',
								borderWidth: '0rpx',
								background: 'linear-gradient(180deg, #4885C5 0%, #3B52A6 100%)',
								borderRadius: '44rpx'
							}"
							shape="square"
							text="提交"
						></u-button>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { getreview } from '@/common/api.js';
import { _containerHeight, _addUnit, _rpxTpx } from '@/utils/GetSys.js';
import Unavbar from '../components/uview-ui/components/u-navbar/u-navbar';
import Ubutton from '../components/uview-ui/components/u-button/u-button';
import uInput from '../components/uview-ui/components/u-input/u-input';
export default {
	components: {
		'u-navbar': Unavbar,
		'u-button': Ubutton,
		'u-input': uInput
	},
	data() {
		return {
			containerHeight: '',
			selected: null,
			reviewList: ['年审', '过户', '出售'],
			uname: '',
			uphone: '',
			img: '',
			image: ''
		};
	},
	methods: {
		addImg() {
			uni.chooseImage({
				count: 1,
				success: res => {
					this.image = res.tempFilePaths[0];

					uni.uploadFile({
						url: 'https://www.chejingjing.cn/api/index/uploadimg',
						filePath: this.image,
						name: 'photo',
						formData: {
							photo: this.image
						},
						success: res1 => {
							this.img = JSON.parse(res1.data).data.url1;
						}
					});
				}
			});
		},
		Submit() {
			if (this.selected == 1) {
				if (this.uname == '') {
					return uni.showToast({
						title: '请输入您的姓名',
						icon: 'none'
					});
				}
				if (this.uphone == '') {
					return uni.showToast({
						title: '请输入您的手机号',
						icon: 'none'
					});
				}
				let reg = /^1[3-8]\d{9}$/;
				if (!reg.test(this.uphone)) {
					uni.showToast({
						title: '请填写正确的手机号',
						icon: 'none'
					});
					return;
				}
				if (!this.selected) {
					return uni.showToast({
						title: '请选择你需要的服务',
						icon: 'none'
					});
				}
				if (!this.img) {
					return uni.showToast({
						title: '请上传您的行驶证',
						icon: 'none'
					});
				}
				let params = {
					token: uni.getStorageSync('usertoken'),
					name: this.uname,
					mobile: this.uphone,
					status: this.selected,
					xxzimages: this.img
				};
				getreview(params).then(res => {
					//如果提交成功跳转到指定的页面
					console.log(res);
					if (res.data.code === 1) {
						uni.navigateTo({
							url: '/userModelA/userA/SubmitSuccess/SubmitSuccess'
						});
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
					}
				});
			} else {
				//任何一个为空不在继续执行
				if (this.uname == '') {
					return uni.showToast({
						title: '请输入您的姓名',
						icon: 'none'
					});
				}
				if (this.uphone == '') {
					return uni.showToast({
						title: '请输入您的手机号',
						icon: 'none'
					});
				}
				let reg = /^1[3-8]\d{9}$/;
				if (!reg.test(this.uphone)) {
					uni.showToast({
						title: '请填写正确的手机号',
						icon: 'none'
					});
					return;
				}
				if (!this.selected) {
					return uni.showToast({
						title: '请选择你需要的服务',
						icon: 'none'
					});
				}
				let params = {
					token: uni.getStorageSync('usertoken'),
					name: this.uname,
					mobile: this.uphone,
					status: this.selected,
					xxzimages:''
				};
				getreview(params).then(res => {
					if (res.data.code === 1) {
						uni.navigateTo({
							url: '/userModelA/userA/SubmitSuccess/SubmitSuccess'
						});
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
					}
				});
			}
		},

		SelectCurrent(index) {
			this.selected = index + 1;
			console.log(this.selected);
		}
	},
	onLoad() {
		this.containerHeight = _containerHeight();
	}
};
</script>

<style lang="scss">
.annu-review {
	.actived {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border: 2rpx solid #436fb8 !important;
		&::before {
			content: '';
			width: 30rpx;
			height: 30rpx;
			border-radius: 30rpx;
			background-color: #436fb8;
		}
	}
}
</style>
